<template>
	<view class="add">	
		<view class="uni-padding-wrap uni-common-mt">
			<form @submit="formSubmit" >
				<view class="uni-form-item uni-column">
					<view class="title">问题</view>
					<input class="question" name="question" v-model="question" placeholder="请输入问题" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">回答</view>
					<textarea class="answer" name="answer" v-model="answer" placeholder="请输入回答" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">分类</view>
					<picker @change="bindPickerChange" :value="catagoryIndex" :range="catagory" range-key="name">
						<view class="uni-input">{{catagory[catagoryIndex].name}}</view>
					</picker>
				</view>
				
				<!-- #ifdef MP -->
				<view class="uni-btn-v">
					<button type="primary" style="background-color: #3cc51f" form-type="submit">保存</button>
					<!-- <button type="default" form-type="reset">取消</button> -->
				</view>
				<!-- #endif -->
				
			</form>
		</view>
	</view>
</template>
<script>
	var  graceChecker = require("../../../common/graceChecker.js");
	export default {
		data() {
			return {
				catagory: [{name:'生活'},{name: '哲学'}, {name:'编程'}, {name:'电商'}],
				catagoryIndex:0,
				answer:"",
				question:"",
				
			}
		},
		onShow() {
			this.answer="";
			this.question="";
		},
		onNavigationBarButtonTap() {
			var rule = [
			    {name:"question", checkType : "string", checkRule:"1,50",  errorMsg:"问题应为1-50个字符"},
				{name:"answer", checkType : "string", checkRule:"1,50",  errorMsg:"回答应为1-50个字符"},
			    // {name:"answer", checkType : "in", checkRule:"男,女",  errorMsg:"请选择性别"},
			    // {name:"loves", checkType : "notnull", checkRule:"",  errorMsg:"请选择爱好"}
			];
			//进行表单检查
			var formData = {
				question:this.question,
				answer:this.answer,
				catagory:this.catagory[this.catagoryIndex].name
			};
			var checkRes = graceChecker.check(formData, rule);
			if(checkRes){
			    uni.showToast({title:"保存成功!", icon:"none"});
				this.$api.add_question(formData).then((res)=>{
					console.log("成功",res);
					uni.switchTab({
						url:'../index/index'
					})
				}).catch((err)=>{
					console.log("失败",err);
				})
				
			}else{
			    uni.showToast({ title: graceChecker.error, icon: "none" });
			}
		},
		methods: {
			bindPickerChange(e){
				// console.log(e.detail);
				this.catagoryIndex=e.detail.value;
			},
			formSubmit: function(e) {
				//console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
                //定义表单规则
                var rule = [
                    {name:"question", checkType : "string", checkRule:"1,50",  errorMsg:"问题应为1-50个字符"},
					{name:"answer", checkType : "string", checkRule:"1,50",  errorMsg:"回答应为1-50个字符"},
                    // {name:"answer", checkType : "in", checkRule:"男,女",  errorMsg:"请选择性别"},
                    // {name:"loves", checkType : "notnull", checkRule:"",  errorMsg:"请选择爱好"}
                ];
                //进行表单检查
                var formData = e.detail.value;
                var checkRes = graceChecker.check(formData, rule);
                if(checkRes){
                    uni.showToast({title:"保存成功!", icon:"none"});
					this.$api.add_question(formData).then((res)=>{
						console.log("成功",res);
						uni.switchTab({
							url:'../index/index'
						})
					}).catch((err)=>{
						console.log("失败",err);
					})
					
                }else{
                    uni.showToast({ title: graceChecker.error, icon: "none" });
                }
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F1F1F1;
	}
	.uni-form-item .title {
		padding: 20rpx 0;
	}
	.add{
		.question{
			padding: 14rpx 24rpx;
			background-color: #FFFFFF;
		}
		.answer{
			padding: 14rpx 24rpx;
			background-color: #FFFFFF;
			width: 100%;
			box-sizing: border-box;
		}
	}
</style>
